import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import AddEditModal from '#cpt/temp/AddEditModal'
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import TableControls from '#cpt/temp/TableControls'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page 					= $Lazy.load(()=>import('#tp/page/page-container'))
const TableComponent 		= $Lazy.state(()=>import('./cpt/table-component'))
const $cache 				= $Lazy.file(()=>import('#private/cache-api'))
const ControlModalAdd		= $Lazy.state(()=>import('./cpt/control-modal-add'))
const TipModal				= $Lazy.state(()=>import('./cpt/tip-modal'))

const enabled = [{ name:'启用', value: '1' },{ name:'待启用', value: '0' },{ name:'禁用', value: '-1' }]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 搜索表单列表
		forms : [
			{ label: '状态',			name: 'enabled',	type: 'select', loading:true,},
			{ label: '模板名称',		name: 'qt_temp_id', type: 'select', 	loading:true, idStr:'uuid' },
			{ label: '模板编码',			name: 'temp_code' },
		],
		// 提交表单列表
		formData : [
			{ label: '中文名称',		name: 'temp_name', 		half:true, required:true  },
			{ label: '英文名称',		name: 'temp_name_en', 	half:true },
			{ label: '模板编码',		name: 'temp_code', 		half:true },
			{ label: '模板状态',		name: 'enabled', 		half:true, type: 'select', loading:true },
			{ label: '排序',		name: 'sort', 			half:true, type:'number' },
			{ label: '备注',		name: 'remark', 		full:true, type:'textarea' },
		]
	}
	
	model = {}
	
	componentDidMount(){
		this.getSelect()
		this.fetch()
	}
	// 获取下拉数据
	getSelect = () => {
		const { forms, formData } = this.state
		$cache.then( async f => {
			// 状态
			$fn.setRows([forms, formData], 'enabled',  await f.company_state)
			// 模板名称
			await $fn.setRowc(forms, 'qt_temp_id',  async () =>  f.getCache({ api: 'qt_template'}))
			this.setState({ forms, formData })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'qt-comp-template/index', {isIndex:true})
	
	// 表单
	cols = [
		{ title: '模板名称',			dataIndex: 'temp_name', 		width:150 },
		{ title: '英文名称', 		dataIndex: 'temp_name_en', 		width:150 },
		{ title: '模板编码', 		dataIndex: 'temp_code', 		width:150 },
		{ title: '状态', 			dataIndex: 'enabled', 			...$fn.table.status,  render: text => $fn.getState(enabled,text) },
		{ title: '备注', 			dataIndex: 'remark', 			width:100 },
		TableControls.controls.call(this)
	]
	
	// 表格操作按钮
	table_controls = (text, { uuid }) => {
		return [
			TableControls.edit.call(this, 'qt-comp-template/infotemp', { uuid },{
				click: ()=> $fn.disabledRows(this.state.formData, ['temp_code'], true)
			}),				// 编辑
		]
	}
	
	// 操作按钮
	controls = () => {
		return [
			// 导入
			// Controls.imports.call(this, 'qt-comp-item/importcompany', { param: { qt_temp_id: this.state.selectedKeys }, isKeys: 1, isMsg:false,
			// 	// onChanged:()=>this.tipModal.open()
			//  }),
			// 新增提示弹窗 耿琰 20220422
			Controls.click.call(this, '文件导入', ()=>this.tipModal.open(), { isKeys: 1}),
			// 导出
			Controls.exports.call(this, 'qt-comp-item/index', { param: { qt_temp_id: this.state.selectedKeys }, isKeys: 1, code: false }),
			Controls.add.call(this, { click: ()=>{
				const { formData } = this.state
				$fn.disabledRows(formData, ['temp_code'], false)
				this.setState({ formData })
			} }),											// 添加
			Controls.click.call(this, '复制模板', ()=>this.modaladd.open({formRef:this.formRef}) ),					// 复制模板
			Confirm.call(this, '禁用', 'qt-comp-template/del', { isKeys: 1 })	// 禁用 
		]
	}
	render(){
		return (
			<>
				<Page title='公司-模板' nobc controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					<div className='bcf fv ex'>
						{ Table.call(this,{ onRow:rows => this.tableRef.load(rows),split:true }) }
					</div>
					{/* 表格 */}
					<div className='bcf fv mt5 ex'>
						<TableComponent onRef={ ref => this.tableRef = ref }/>
					</div>
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ api: 'qt-comp-template/addtemp', editApi:'qt-comp-template/edittemp', onComplete:()=> $fn.dataRemove('qt-comp-template/select') }) }) }
				{/* 复制模板 */}
				<ControlModalAdd onRef={ref=>this.modaladd=ref} onRefresh={this.fetch} />
				{/* 导入提示 */}
				<TipModal onRef={ref=>this.tipModal=ref} onRefresh={this.fetch} keys = {this.state.selectedKeys} />
			</>
		)
	}
}

export default Index